/*创建底部*/
var bottomWrap = document.createElement("div");
var bottomMsgWrap = document.createElement('div');
var box = document.createElement('div');
var formWrap = document.createElement("div");

window.onload = function () {

    var boxLeft = document.createElement('div');
    var boxLpic = document.createElement('img');
    var boxRight = document.createElement('div');

    box.appendChild(boxLeft);
    box.setAttribute('style', 'width:176px;height:40px;line-height:40px;background: #1abc9c;position:fixed;bottom:0;right:120px;');
    boxLeft.appendChild(boxLpic);
    boxLeft.setAttribute('style', 'float:left;');
    boxLeft.setAttribute('style', 'padding-left:10px;box-sizing: content-box;width:35px;height:40px;float:left;border-right: 1px solid rgba(0, 0, 0, 0.08);');
    boxLpic.src = "";
    boxLpic.setAttribute('style', 'width:24px;height:24px;vertical-align: middle;');
    box.appendChild(boxRight);
    boxRight.innerHTML = "给我们留言吧";
    boxRight.setAttribute('style', 'cursor:pointer;padding-left:20px;line-height:40px;font-size:16px;color:#fff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;');




    /*创建头部*/
    var topHead = document.createElement("div");
    var titWrap = document.createElement("div");
    var iconLabel = document.createElement("div");
    var imgWrap = document.createElement("img");

    /*最外层容器*/
    formWrap.setAttribute('style', 'position:fixed;right:20px;bottom:0;z-index:99999999;width:330px;height: 567px;   background: rgb(242, 243, 245);border-bottom-left-radius: 6px;border-top-right-radius: 6px;line-height: normal;');

    /*头部样式*/
    topHead.setAttribute('style', 'padding:10px;background:#1abc9c ;color: #fff;font-size: 14px;overflow:hidden;line-height: 40px;border-top-left-radius: 6px;border-top-right-radius: 6px;');

    titWrap.innerHTML = "给我们留言";
    titWrap.setAttribute('style', 'float: left;line-height: normal');

    iconLabel.setAttribute('style', 'float: right;line-height: normal');
    imgWrap.src = "";
    imgWrap.setAttribute('style', 'cursor:pointer;width: 20px;height: 20px;');



    /*姓名*/
    var tips = document.createElement("div");
    var itemWrap = document.createElement("div");
    var nameTit = document.createElement("div");
    var nameWrap = document.createElement("div");
    var nameValue = document.createElement("input");
    var inputStyle = 'width: calc(100% - 24px);outline: none;height: 18px;padding: 12px;box-sizing: content-box;border-width: initial; border-style: none;border-color: initial;border-image: initial;';
    /*提示信息*/
    tips.innerHTML = "请在此输入留言内容，我们会尽快与您联系。";
    tips.setAttribute('style', 'font-size: 12px; color: rgb(102, 102, 102);padding: 16px;');
    nameTit.innerHTML = "姓名 <span style='color: red;'>*</span>";
    nameTit.setAttribute('style', 'color: rgb(68, 68, 68);font-size: 12px;padding: 6px 0px 6px 16px;');
    nameValue.placeholder = "请输入姓名";
    nameValue.setAttribute('style', inputStyle);

    /*公司名称*/
    var companyTit = document.createElement("div");
    var companyWrap = document.createElement("div");
    var companyValue = document.createElement("input");
    /*提示信息*/
    companyTit.innerHTML = "公司名称 <span style='color: red;'>*</span>";
    companyTit.setAttribute('style', 'color: rgb(68, 68, 68);font-size: 12px;padding: 6px 0px 6px 16px;');
    companyValue.placeholder = "请输入公司名称";
    companyValue.setAttribute('style', inputStyle);


    /*手机*/
    var itemTit = document.createElement("div");
    var inputWrap = document.createElement("div");
    var inputValue = document.createElement("input");
    /*提示信息*/
    itemTit.innerHTML = "手机号 <span style='color: red;'>*</span>";
    itemTit.setAttribute('style', 'color: rgb(68, 68, 68);font-size: 12px;padding: 6px 0px 6px 16px;');
    inputValue.placeholder = "请输入手机号";
    inputValue.setAttribute('style', inputStyle);

    /*咨询业务*/
    var ywTit = document.createElement("div");
    var ywWrap = document.createElement("div");
    var ywValue = document.createElement("select");
    /*提示信息*/
    ywTit.innerHTML = "咨询业务 <span style='color: red;'>*</span>";
    ywTit.setAttribute('style', 'color: rgb(68, 68, 68);font-size: 12px;padding: 6px 0px 6px 16px;');
    ywValue.innerHTML="" +
        "<option value='信息流投放'>信息流投放</option>" +
        "<option value='新媒体推广'>新媒体推广</option>" +
        "<option value='APP买量'>APP买量</option>" +
        "<option value='ASO优化'>ASO优化</option>" +
        "<option value='青瓜智投'>青瓜智投</option>" +
        "<option value='MCN合作'>MCN合作</option>" +
        "<option value='CPD投放'>CPD投放</option>" +
        "<option value='网站合作'>网站合作</option>" +
        "<option value='其他合作'>其他合作</option>";
    ywValue.setAttribute('style', inputStyle);

    /*留言内容*/
    var msgWrap = document.createElement("div");
    var msgTit = document.createElement("div");
    var textWrap = document.createElement("div");
    var textValue = document.createElement("textarea");
    /*提交*/
    var submitBtn = document.createElement("div");
    msgWrap.setAttribute('style', 'margin-bottom:16px;');
    // itemWrap.setAttribute('style', 'margin-bottom:16px;');
    msgTit.innerHTML = "留言内容 <span style='color: red;'>*</span>";
    msgTit.setAttribute('style', 'color: rgb(68, 68, 68);font-size: 12px;padding: 6px 0px 6px 16px;');
    textValue.setAttribute('style', 'font-family: inherit;display: block;width: calc(100% - 24px);box-sizing: content-box;height: 75px; overflow-x: hidden;overflow-y: auto;resize: none;background-color: rgb(255, 255, 255);word-break: break-all;font-size: 12px;-webkit-appearance: none;padding: 12px;outline: 0px;border: none!important;');
    textValue.placeholder = "请输入留言内容";

    submitBtn.innerHTML = "提交";
    submitBtn.setAttribute('style', 'cursor:pointer;margin:0 auto;width: 90%;height: 40px;line-height: 40px;background: #1abc9c;text-align: center;color: #ffffff;border-radius: 3px;');
    submitBtn.setAttribute('onclick', 'subMsg()');


    /*创建留言成功*/
    var sussTit = document.createElement("div");
    var sussTips = document.createElement('div');
    var closeBtn = document.createElement('div');
    var reWirte = document.createElement('div');

    bottomMsgWrap.appendChild(sussTit);
    sussTit.innerHTML = "留言成功";
    sussTit.setAttribute('style', 'display:block;font-size:1.5em;font-weight:bold;text-align:center;margin:0.83em 0;');

    bottomMsgWrap.appendChild(sussTips);
    sussTips.innerHTML = '我们会尽快联系你';
    sussTips.setAttribute('style', 'display:block;margin:1em 0;font-size:14px;text-align:center;');

    bottomMsgWrap.appendChild(closeBtn);
    closeBtn.innerHTML = "关闭";
    closeBtn.setAttribute('style', 'cursor:pointer;margin:0 auto;border-radius:3px;background: #1abc9c;width:150px;height:32px;line-height:32px; color:#fff;font-size:13px; text-align:center;');

    bottomMsgWrap.appendChild(reWirte);
    reWirte.innerHTML = "再次留言";
    reWirte.setAttribute('style', 'cursor:pointer;text-align:center;font-size:13px;    text-decoration: underline;margin:20px 0;');
    reWirte.setAttribute('onclick', 'reMsg()');

    /*创建底部id*/
    bottomWrap.id = "js_form";
    bottomMsgWrap.id = "js_tips";
    bottomMsgWrap.style.display = 'none';
    inputValue.id = "js_phone";
    textValue.id="js_liuyan";
    nameValue.id="js_name";
    companyValue.id='js_company';
    ywValue.id='js_yw';

    inputValue.required=true;
    textValue.required=true;
    nameValue.required=true;
    companyValue.required=true;

    /*头部*/
    topHead.appendChild(titWrap);

    topHead.appendChild(iconLabel);
    iconLabel.appendChild(imgWrap);
    formWrap.appendChild(topHead);
    /*提示信息*/
    formWrap.appendChild(bottomWrap);
    formWrap.appendChild(bottomMsgWrap);
    bottomWrap.appendChild(tips);
    bottomWrap.appendChild(companyWrap);
    bottomWrap.appendChild(nameWrap);
    bottomWrap.appendChild(itemWrap);
    bottomWrap.appendChild(ywWrap);
    itemWrap.appendChild(itemTit);
    itemWrap.appendChild(inputWrap);
    inputWrap.appendChild(inputValue);
    companyWrap.appendChild(companyTit);
    companyWrap.appendChild(companyValue);
    ywWrap.appendChild(ywTit);
    ywWrap.appendChild(ywValue);
    /*留言信息*/
    bottomWrap.appendChild(msgWrap);
    msgWrap.appendChild(msgTit);
    msgWrap.appendChild(textWrap);
    textWrap.appendChild(textValue);

    nameWrap.appendChild(nameTit);
    nameWrap.appendChild(nameValue);


    bottomWrap.appendChild(submitBtn);
    document.body.appendChild(formWrap);
    document.body.appendChild(box);
    formWrap.style.display = 'none';

    box.setAttribute('onclick', 'alertForm()');
    imgWrap.setAttribute('onclick', 'closeForm()');
    closeBtn.setAttribute('onclick', 'closeForm()');

}


function closeForm() {
    formWrap.style.display = "none";
    box.style.display = 'block';
}


function alertForm() {
    formWrap.style.display = "block";
    box.style.display = 'none';
}

function subMsg() {
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'http://icrm.opp2.com/form/customer.php');
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    /*   发送请求*/
    var js_name = document.getElementById('js_name').value;
    var js_phone = document.getElementById('js_phone').value;
    var js_liuyan = document.getElementById('js_liuyan').value;
    var js_company = document.getElementById('js_company').value;
    var js_yw = document.getElementById('js_yw');
    var yw_index=js_yw.selectedIndex;
    var yw = js_yw.options[yw_index].value;
    xhr.send('company='+js_company+'&name='+js_name+'&mobile='+js_phone+'&msg='+js_liuyan+'&yw='+yw);
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
        if (xhr.readyState == 4 && xhr.status == 200) {
            if(xhr.responseText==1){
                creatAlert();
            }else{
                alert(xhr.responseText);
            }
        }
    };
}


/*再次留言*/
function reMsg() {
    bottomWrap.style.display = "block";
    bottomMsgWrap.style.display = "none";
    document.getElementById('js_phone').value='';
    document.getElementById('js_liuyan').value='';
    document.getElementById('js_name').value='';
    document.getElementById('js_company').value='';
}

function creatAlert() {
    bottomWrap.style.display = "none";
    bottomMsgWrap.style.display = "block";
}
